<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>非父子组件的数据传递(bus/总线)</title>
  <script src="../static/vue.js"></script>
</head>
<body>
<div id="root">
  <child content="Dell"></child>
  <child content="Lee"></child>

</div>

<script>
  Vue.prototype.bus = new Vue();
  Vue.component('child', {
    props: {
      content: String
    },
    data:function(){
      return{
        c:this.content
      }
    },
    template: '<div @click="handleClick">{{c}}</div>',
    methods:{
      handleClick:function () {
        this.bus.$emit('change',this.content)
      }
    },
    mounted:function () {
      var _this=this;
      this.bus.$on('change',function (msg) {
        _this.c=msg
      })
    }
  })
  var vm = new Vue({
    el: '#root'
  })
</script>
</body>
</html>
